---
title: Image Preview
noindex: true
layout: none
---
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="robots" content="noindex" />
	<title>{{ page.title }}</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css" />
    <script src="/js/jquery-3.3.1.min.js"></script>
    <script src="/js/popper.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
	<link href="/css/fontawesome-all.css" rel="stylesheet" type="text/css" />
	<style type="text/css">
	html, body { width: 100%; height: 100% }
	#preview-container { width: 100%; height:100%;background-image: url("/images/preview/background_light.png"); background-repeat: repeat-x repeat-y;}
	#xpreview-image { display: block; margin: auto;vertical-align: middle; width:24px; height:24px;}
    .color-block { border: 1px solid #cccccc; display: inline-block; width: 18px; height: 18px; margin-right: 5px; margin-top: 3px; vertical-align: text-bottom;}
#preview-container { position: relative; overflow: hidden;}
#preview-image {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0px solid black;
}
	.navbar { margin-bottom: 0px; }
    img.toolbar { height: 18px; }
	</style>
</head>
<body>
	<nav class="navbar navbar-default navbar-fixed-top py-1">
		<div class="container">
            <p class="navbar-text mb-0 d-none d-lg-block">
                <i class="fas fa-eye"></i>
                Image Preview
            </p>
            <div class="btn-group" role="group" aria-label="Background">
                <button class="btn btn-outline-dark navbar-btn background-btn" data-background="grid" title="Checkboard background" type="button"><i class="fas fa-th-large"></i></button>
                <button class="btn btn-outline-dark navbar-btn background-btn" data-background="dark" title="Dark background" type="button"><i class="fas fa-square"></i></button>
                <button class="btn btn-outline-dark navbar-btn background-btn active" data-background="light" title="Light Background" type="button"><i class="far fa-square"></i></button>
            </div>

<div class="btn-group" role="group" aria-label="Zoom">
  <button type="button" class="btn btn-outline-dark navbar-btn zoom-btn" id="zoom_out" title="Zoom out"><i class="fa fa-search-minus"></i></button>
  <button type="button" class="btn btn-outline-dark navbar-btn zoom-btn" id="zoom_reset" title="No zoom">1:1</button>
  <button type="button" class="btn btn-outline-dark navbar-btn zoom-btn" id="zoom_in" title="Zoom in"><i class="fa fa-search-plus"></i></button>
  <button type="button" class="btn btn-outline-dark navbar-btn zoom-btn" id="zoom_full" title="Max zoom"><i class="fa fa-arrows-alt"></i></button>
</div>

<div class="btn-group d-none d-md-inline-flex" role="group" aria-label="Border">
  <button type="button" class="btn btn-outline-dark navbar-btn border-btn" data-border="0" title="No border">None</button>
  <button type="button" class="btn btn-outline-dark navbar-btn border-btn active" data-border="1" title="Thin border">Thin</button>
  <button type="button" class="btn btn-outline-dark navbar-btn border-btn" data-border="4" title="Thick border">Thick</button>
</div>

            <div class="btn-group d-none d-md-inline-flex" role="group" aria-label="Border">
                <button type="button" class="btn btn-outline-dark navbar-btn d-none d-sm-block" id="color_analysis" title="Color Analysis" data-toggle="popover" data-title="Color Analysis" data-html="true" data-placement="bottom" data-popped="0"><img class="toolbar" src="/images/toolbar/color_palette.svg" /></a>
                <button type="button" class="btn btn-outline-dark navbar-btn d-none d-sm-block" id="image_dim" title="Dimensions" data-toggle="popover" data-title="Image Dimensions" data-html="true" data-placement="bottom" data-popped="0"><img class="toolbar" src="/images/toolbar/ruler-triangle-solid.svg" /></i></button>
                <a type="button" class="btn btn-outline-dark navbar-btn d-none d-sm-block" id="btn-download" title="Edit on Vecta.io"><img class="toolbar" src="/images/toolbar/edit-solid.svg" /></i></a>
            </div>
            <a class="btn btn-outline-dark navbar-btn d-none d-md-block" id="btn-download" title="Download"><i class="fa fa-download"></i></a>
            <a class="btn btn-outline-dark navbar-btn" href="/" id="btn-exit" title="Exit Preview"><i class="fa fa-sign-out"></i></a>
			
			<p class="navbar-text mb-0 navbar-right d-none d-lg-block"><a href="/index.html" class="navbar-link">Vector Logo Zone</a></p>
		</div>
	</nav>
	<div id="preview-container">
		<img id="preview-image" src="/images/spinner.svg" crossorigin="anonymous" style="width:64px;height:64px;"/>
	</div><!--/container-->
{% include google-analytics.html %}
<script>
	function qsParam(key) {
	    key = key.replace(/[*+?^$.\[\]{}()|\\\/]/g, "\\$&"); // escape RegEx meta chars
	    var match = location.search.match(new RegExp("[?&]"+key+"=([^&]+)(&|$)"));
	    return match && decodeURIComponent(match[1].replace(/\+/g, " "));
	}

	function resizeBody()
	{
		var navbarHeight = $(".navbar").outerHeight();
		$("#preview-container").css("height", ($(window).innerHeight() - navbarHeight) + "px");
		//$("#preview-container").css("top", navbarHeight + "px");
	}

	$(document).ready(function() {
		resizeBody();

		var imgUrl = qsParam("image");
		if (imgUrl)
		{
			console.log("INFO: loading image " + imgUrl);
			$("#preview-image").bind('load', function(e) {
                var img = $("#preview-image")[0];
                console.info("INFO: image loaded (" + img.naturalWidth + "x" + img.naturalHeight + ")");
                $(img).attr("style", "");       // clear spinner size
                $(img).css("border-width", "1px");

                var full = $("#preview-container")[0];
                var zoomX = full.clientWidth / img.naturalWidth;
                var zoomY = full.clientHeight / img.naturalHeight;
                var newZoom = Math.min(zoomX, zoomY) * 0.75;
                img.width = img.naturalWidth * newZoom;
                img.height = img.naturalHeight * newZoom;


                var content = $("<div>");
                content.append($("<span>").text("Width: " + img.naturalWidth));
                content.append($("<br>"));
                content.append($("<span>").text("Height: " + img.naturalHeight));

                $("#image_dim").attr("data-content", content.html());
                $("#image_dim").popover();
            });

            $("#color_analysis").bind('click', function(e) {
                if ($("#color_analysis").attr("data-popped") == "1") {
                    $("#color_analysis").popover('hide');
                    $("#color_analysis").attr("data-popped", "0");
                    return;
                }

                if ($("#color_analysis").attr("data-content")) {
                    $("#color_analysis").popover('show');
                    $("#color_analysis").attr("data-popped", "1");
                    return;
                }

                var src = $("#preview-image").prop("src");
                src = "https://www.vectorlogo.zone" + $("#preview-image").attr("src");
                $.ajax({
                    data: { "url":  src},
                    dataType: "json",
                    error: function(xhr, status, err) {
                        console.error("ERROR: " + status + " (" + err + ")");
                    },
                    method: "POST",
                    success: function(data, status, xhr) {
                        var content = $("<div>");
                        console.log("data=" + JSON.stringify(data));
                        if (data.success && data.colors) {
                            console.log("here");
                            for (var color in data.colors) {
                                console.log(data.colors[color]);
                                content.append($("<div>").attr("class", "color-block").css("background-color", data.colors[color]));
                                content.append($("<span>").text(data.colors[color]));
                                content.append($("<br>"));
                            }
                            $("#color_analysis").attr("data-content", content.html());
                            $("#color_analysis").attr("data-popped", "1");
                        }
                        $("#color_analysis").popover('show');
                        console.log("shown");
                    },
                    timeout: 10000,
                    url: "https://color.vectorlogo.zone/api"
                });
                //return false;
            });

			$("#preview-image").attr("src", imgUrl);
			$("#btn-download").attr("href", imgUrl).attr("download", imgUrl.substring(imgUrl.lastIndexOf('/')+1, imgUrl.length));
            $("#btn-download").attr("href", "https://vecta.io/app/link?src={{site.production_url}}" + imgUrl);
			$("#btn-exit").attr("href", imgUrl.substring(0, imgUrl.lastIndexOf('/')));
		}

		var next = qsParam("next");
		if (next)
		{
			$("#btn-exit").attr("href", next);
		}

		$(".background-btn").bind('click', function(e) {
			var elem = e.currentTarget;
			$(".background-btn").removeClass("active");
			$(elem).addClass("active");
			var background_image = "/images/preview/background_" + elem.attributes["data-background"].nodeValue + ".png";
			$("#preview-container").css("background-image", "url('" + background_image + "')");
		});

		$(".border-btn").bind('click', function(e) {
			var elem = e.currentTarget;
			$(".border-btn").removeClass("active");
			$(elem).addClass("active");
			var border_width = elem.attributes["data-border"].nodeValue + "px";
			console.log(border_width);
			$("#preview-image").css("border-width", border_width);
		});

		$("#zoom_in").bind('click', function(e) {
			var img = $("#preview-image")[0];
			var newZoom = img.width / img.naturalWidth + 1;
			img.width = img.naturalWidth * newZoom;
			img.height = img.naturalHeight * newZoom;
		});

		$("#zoom_out").bind('click', function(e) {
			var img = $("#preview-image")[0];
			var currentZoom = img.width / img.naturalWidth;
			var newZoom = currentZoom > 1 ? img.width / img.naturalWidth - 1 : currentZoom * 0.5;
			img.width = img.naturalWidth * newZoom;
			img.height = img.naturalHeight * newZoom;
		});
		$("#zoom_reset").bind('click', function(e) {
			var img = $("#preview-image")[0];
			img.width = img.naturalWidth;
			img.height = img.naturalHeight;
		});

		$("#zoom_full").bind('click', function(e) {
			var img = $("#preview-image")[0];
			var full = $("#preview-container")[0];
			var zoomX = full.clientWidth / img.naturalWidth;
			var zoomY = full.clientHeight / img.naturalHeight;
			var newZoom = Math.min(zoomX, zoomY);
			img.width = img.naturalWidth * newZoom;
			img.height = img.naturalHeight * newZoom;
		});

        $("#color_analysis").popover( {"trigger": "manual"});
        /*
		$("#color_analysis").bind('click', function(e) {
		    console.log("DEBUG: popover");
            $('#color_analysis').popover({
                html: true,
                placement: 'auto bottom',
                title: 'Color Analysis'
            });
        });
        */
		$(window).bind('resize', resizeBody);
	});

</script>
</body>
</html>
